<!--
 * @Author: 15097322811 1447934599@qq.com
 * @Date: 2024-01-24 15:43:50
 * @LastEditors: 15097322811 1447934599@qq.com
 * @LastEditTime: 2024-02-04 14:59:11
 * @Description: 
-->
<template>
  <view class="search_view">
    <!-- #ifndef H5 -->
    <view
      class=""
      style="height: 50px"></view>
    <!-- #endif -->
    <view class="search_top">
      <view
        class="arrow"
        @click="backPath">
        <u-icon
          :size="40"
          name="arrow-left" />
      </view>
      <u-search
        class="search_input"
        v-model="keyword"
        :placeholder="placeholder"
        focus
        shape="square"
        show-action
        :clearabled="true"
        @search="searchBtn"
        @custom="searchBtn"></u-search>
    </view>
    <view
      class="search_history"
      v-if="historyList.length > 0">
      <view class="search_history_top">
        <text class="search_history_text">{{$t('历史记录')}}</text>
        <uni-icons
          type="trash"
          size="22"
          @click="delHistory"></uni-icons>
      </view>
      <view class="search_history_list">
        <view
          class="search_history_list_item"
          v-for="(item, index) in historyList"
          :key="index"
          @click="searchListBtn(item)"
          >{{ item }}</view
        >
      </view>
    </view>
    <!-- <div class="history-box">
      <div class="title">搜索历史</div>
      <ul class="history-content">
        <li
          v-for="(item, index) in historyDataShow"
          :key="index">
          <span>{{ item }}</span>
        </li>
        <li
          v-if="!showMoreHis && hasMoreBthHis"
          @click="toggleShowMoreHistory">
          <span><u-icon name="arrow-down" /></span>
        </li>
        <li
          v-if="showMoreHis && hasMoreBthHis"
          @click="toggleShowMoreHistory">
          <span><u-icon name="arrow-up" /></span>
        </li>
      </ul>
    </div> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      placeholder: "",
      historyList: [],
      hasMoreBthHis: false, //搜索历史是否显示 展开/收起 按钮
      showMoreHis: false, //搜索历史是否显示 展开/收起 按钮
      historyData: [], //历史搜索数据
      historyDataShow: [], //历史搜索数据
    };
  },
  onLoad(option) {
    this.keyword = option.keyword;
    this.placeholder = option.placeholder;
    this.getHistoryList(this.keyword);
    this.historyData = [];
    this.historyDataShow = [...this.historyData];
    this.toggleHistoryData();
  },
  methods: {
    backPath() {
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      });
    },
    searchBtn() {
      let keyword = this.keyword || this.placeholder;
      this.getHistoryList(keyword);
      uni.navigateTo({
        url: "/pages/mall/searchList?keyword=" + keyword,
      });
    },
    searchListBtn(keyword) {
      uni.navigateTo({
        url: "/pages/mall/searchList?keyword=" + keyword,
      });
    },
    getHistoryList(keyword) {
      this.$http({
        url: "api/member/history",
        data: { keyword: keyword },
      }).then((res) => {
        if (res.data.code == 1) {
          this.historyList = res.data.data;
        }
      });
    },
    delHistory() {
      uni.showModal({
        title: this.$t("提示"),
        content: this.$t("确认删除全部搜索记录"),
        success: (res) => {
          if (res.confirm) {
            this.cleanHistory();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    cleanHistory() {
      this.$http({
        url: "api/member/qiongk",
        data: { keyword: "" },
      }).then((res) => {
        if (res.data.code == 1) {
          this.historyList = res.data.data;
        }
      });
    },

    toggleHistoryData() {
      let idx = 0;
      let count = 0;
      this.$nextTick(() => {
        let ulNode = document.querySelector(".history-content");
        if (ulNode != null) {
          let ulChid = ulNode.querySelectorAll("li"); //获取父容器所有子节点
          console.log(ulChid);
          ulChid.forEach((i, index) => {
            if (i.offsetLeft === 0) {
              count++;
              if (count === 3) {
                idx = index - 1;
                this.hasMoreBthHis = true;
              }
            }
          });
        }
        // 超过2行截断数据
        if (idx > 0) {
          this.historyDataShow = this.historyData.slice(0, idx);
        } else {
          this.historyDataShow = this.historyData;
        }
      });
    },
    //显示更多处理 - 历史搜索
    toggleShowMoreHistory() {
      this.showMoreHis = !this.showMoreHis;
      if (this.showMoreHis) {
        this.historyDataShow = this.historyData;
      } else {
        this.toggleHistoryData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search_view {
  width: 100%;
  .search_top {
    //#ifndef MP-WEIXIN
    width: 100%;
    //#endif
    //#ifdef MP-WEIXIN
    width: 78%;
    //#endif
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .arrow {
      display: inline-block;
      width: 100rpx;
      text-align: center;
    }
    .search_input {
      width: 100%;
    }
  }
  .search_history {
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    .search_history_top {
      display: flex;
      justify-content: space-between;
      .search_history_text {
        font-size: 34rpx;
        font-weight: bold;
        color: #1d1d1d;
      }
    }
    .search_history_list {
      display: flex;
      gap: 15rpx;
      flex-wrap: wrap;
      margin-top: 20rpx;
      .search_history_list_item {
        padding: 10rpx 8rpx;
        background-color: #f4f3f8;
        color: #a7a6aa;
        font-size: 24rpx;
        border-radius: 5rpx;
      }
    }
  }
  .history-box {
    margin-bottom: 0.64rem;
  }
  .title {
    width: 100%;
    height: 30rpx;
    line-height: 30rpx;
  }

  ul {
    position: relative;

    li {
      display: inline-block;
      margin: 10rpx 10rpx 0 0;
      max-width: calc(100% - 10rpx);
      height: 30rpx;
      line-height: 30rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #999;
      background: #f5f5f5;
      border-radius: 5rpx;
      cursor: pointer;

      span {
        display: block;
        margin: 0 10rpx;
        width: calc(100% - 20rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .van-icon {
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
